<template>
  <div class="parent">
    <echartsDom v-if="isShowEcharts" :width="width" :height="height" :option="option" />
    <div v-else>
      <px-empty :image-size="50" />
    </div>
  </div>
</template>

<script setup lang="ts">
import { reactive, toRefs, ref, watch } from "vue";
import echartsDom from "./echartsDom.vue";
import { queryConsumeChartForDay } from "@/api/waterKanban";
const props = defineProps({
  width: {
    type: String,
    default: ""
  },
  height: {
    type: String,
    default: ""
  },
  color: {
    type: String,
    default: "#3B82F6"
  },
  chartvalue: {
    type: Object,
    required: true
  }
});
const isShowEcharts = ref(false);
const state = reactive({
  option: {}
});
const { option } = toRefs(state);
const valueIsEmpty = value => {
  if (value === "" || value == null || typeof value == "undefined" || JSON.stringify(value) === "{}") {
    return true;
  }
  return false;
};
const getoptions = () => {
  if (!valueIsEmpty(props.chartvalue)) {
    isShowEcharts.value = true;
    console.log(`output->props.chartvalue.yaxis`, props.chartvalue.yaxis);
    let legendData = ["一期目标值", "一期标杆值", "一期合规值"];
    let seriesData = [
      {
        name: "一期目标值",
        data: props.chartvalue.yaxis[0].value.map(item => props.chartvalue.targetValue1),
        showSymbol: false,
        lineStyle: {
          color: "#b57528",
          type: "solid"
        },
        itemStyle: {
          color: "#b57528",
          borderColor: "#b57528"
        },
        type: "line"
      },
      {
        name: "一期标杆值",
        data: props.chartvalue.yaxis[0].value.map(item => props.chartvalue.benchmarkValue1),
        showSymbol: false,
        lineStyle: {
          color: "#f29b36",
          type: "solid"
        },
        itemStyle: {
          color: "#f29b36",
          borderColor: "#f29b36"
        },
        type: "line"
      },
      {
        name: "一期合规值",
        data: props.chartvalue.yaxis[0].value.map(item => props.chartvalue.complianceValue1),
        showSymbol: false,
        lineStyle: {
          color: "#d50e21",
          type: "solid"
        },
        itemStyle: {
          color: "#d50e21",
          borderColor: "#d50e21"
        },
        type: "line"
      }
    ];
    if (props.chartvalue.yaxis[0].name !== "创新中心一期") {
      legendData = ["二期目标值", "二期标杆值", "二期合规值"];
      seriesData = [
        {
          name: "二期目标值",
          data: props.chartvalue.yaxis[0].value.map(item => props.chartvalue.targetValue2),
          showSymbol: false,
          lineStyle: {
            color: "#b57528",
            type: "dotted"
          },
          itemStyle: {
            color: "#b57528",
            borderColor: "#b57528"
          },
          type: "line"
        },
        {
          name: "二期标杆值",
          data: props.chartvalue.yaxis[0].value.map(item => props.chartvalue.benchmarkValue2),
          showSymbol: false,
          lineStyle: {
            color: "#f29b36",
            type: "dotted"
          },
          itemStyle: {
            color: "#f29b36",
            borderColor: "#f29b36"
          },
          type: "line"
        },
        {
          name: "二期合规值",
          data: props.chartvalue.yaxis[0].value.map(item => props.chartvalue.complianceValue2),
          showSymbol: false,
          lineStyle: {
            color: "#d50e21",
            type: "dotted"
          },
          itemStyle: {
            color: "#d50e21",
            borderColor: "#d50e21"
          },
          type: "line"
        }
      ];
    }
    const series = [
      ...props.chartvalue.yaxis.map(item => {
        return {
          data: item.value,
          type: "line",
          name: `${item.name}`
        };
      }),
      ...seriesData
    ];
    option.value = {
      grid: {
        left: "40px",
        top: "55px",
        right: "0px",
        bottom: "10px",
        containLabel: true
      },
      legend: {
        x: "right",
        width: "80%",
        data: legendData // 只展示这两个图例
      },
      tooltip: {
        trigger: "axis"
      },
      xAxis: {
        type: "category",
        boundarGap: false,
        // data: response.xaxis
        data: props.chartvalue.xaxis
      },
      yAxis: {
        name: "tCO2e",
        type: "value"
      },
      series
    };
  } else {
    isShowEcharts.value = false;
  }
};
watch(
  () => props.chartvalue,
  newOption => {
    getoptions();
  },
  { immediate: true }
);
</script>

<style scoped lang="scss">
.parent {
  float: left;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
</style>
